import { getSongFn } from "@/api/index.js";
import { setStorage, getStorage } from "@/baseFnMixin/localStorage/storageMixin.js";
let storage = null;
try {

    if (window.localStorage.getItem("lyric") !== null) {
        storage = JSON.parse(getStorage(window.localStorage.getItem("lyric")))
    }
}
catch (err) {
    window.alert("不建议修改存储的值")
}
export default {

    state: () => ({
        // 歌词
        lyric: storage,
        // 当前歌词时间
        lyricProgressTime: 0,
        // 歌词元素
        lyricElement: null,
        // 按下时的Y轴
        clientY: null,
        //  歌词滚动条top值
        moveSlideTop: 0,
        //  鼠标移动的控制开关  鼠标移动控制歌词滚动条的滑动
        mousemoveFlag: false,
        // 歌词滚动条的top值
        slideTop: 0,
        // 最大可以滑动的距离
        maxTop: null,
        //  内容区最大可以滑动的距离
        contextMove: null,
        //  歌词盒子的元素
        lyricboxElement: null,
        //  歌曲页面歌词块
        pageLyric: null,
        pageFlag: true,
        //  当页面歌词请求之后,保存一份歌词,当页面歌曲点击播放时,就把保存的歌词给到state.lyric,改变播放列表中的歌词，避免了重新请求数据。
        temporaryLric: null,



    }),

    actions: {
        // 获取歌词
        Lyric(context, value) {


            getSongFn(value).then(response => {
                if (response.data.tlyric && response.data.tlyric.lyric != "") {
                    const lyric = [response.data.lrc.lyric, response.data.tlyric.lyric];
                    context.commit("translateAndOriginal", lyric);

                } else {
                    if (response.data.lrc) {

                        context.commit("LYRIC", response.data.lrc.lyric);
                    }
                }

            }, (err) => { console.log(err); })
        }
    },
    mutations: {
        //  原歌词 + 翻译歌词的处理
        translateAndOriginal(state, lyric) {
            const Origina = lyric[0].split(/\n/);
            const translate = lyric[1].split(/\n/);
            const Originatemporary = [];
            const translatetemporary = [];
            Origina.forEach((ele) => {
                const tm = {
                    time: ele.slice(1, ele.indexOf("]")),
                    ly: ele.slice(ele.indexOf("]") + 1),
                };
                Originatemporary.push(tm);
            });
            translate.forEach((ele) => {
                const tm = {
                    time: ele.slice(1, ele.indexOf("]")),
                    ly: ele.slice(ele.indexOf("]") + 1),
                };
                translatetemporary.push(tm);
            });
            for (const k of Originatemporary) {
                translatetemporary.forEach((ele) => {
                    if (k.time === ele.time) {
                        k.ly = `${k.ly}<br>${ele.ly}`;
                    }
                });
            }
            Originatemporary.forEach((ele) => {
                if (ele.time === "") {
                    Originatemporary.splice(Originatemporary.indexOf(ele), 1);
                }
            });
            Originatemporary.forEach((el) => {
                const arr = el.time.split(/:/);
                el.time = arr[0] * 60 + Number(arr[1])

            });

            if (state.pageFlag) {
                state.lyric = Originatemporary;
                const storage = setStorage(JSON.stringify(Originatemporary));
                window.localStorage.setItem("lyric", storage);
            } else {

                let lyric = '';
                Originatemporary.forEach(el => {
                    lyric = `${lyric}${el.ly}<br>`;
                })
                // 将歌词存放一份在临时值中,当歌曲页面点击播放时,将临时的值给到state.lyric，这样就避免了重新请求数据。
                state.temporaryLric = Originatemporary;
                state.pageLyric = lyric;
                state.pageFlag = true;
            }

        },
        LYRIC: function (state, value) {

            const Origina = value.split(/\n/);
            const Originatemporary = [];
            Origina.forEach((ele) => {
                const tm = {
                    time: ele.slice(1, ele.indexOf("]")),
                    ly: ele.slice(ele.indexOf("]") + 1),
                };
                Originatemporary.push(tm);
            });
            Originatemporary.forEach((ele) => {
                if (ele.time === "") {
                    Originatemporary.splice(Originatemporary.indexOf(ele), 1);
                }
            });

            Originatemporary.forEach((el) => {
                const arr = el.time.split(/:/);
                el.time = arr[0] * 60 + Number(arr[1])

            });
            //  当pageFlag 为true时则歌词是用来改变播放列表中歌词部分的。false则是歌曲页面中的需求
            if (state.pageFlag) {
                state.lyric = Originatemporary;
                const storage = setStorage(JSON.stringify(Originatemporary));
                window.localStorage.setItem("lyric", storage);
            } else {

                let lyric = {
                    lyric1: null,
                    lyric2: null,
                };

                Originatemporary.forEach((el, index) => {
                    if (index <= 9) {
                        lyric.lyric1 = `${lyric.lyric1}${el.ly}<br>`;
                    } else {
                        lyric.lyric2 = `${lyric.lyric2}${el.ly}<br>`;
                    }

                })
                // 将歌词存放一份在临时值中,当歌曲页面点击播放时,将临时的值给到state.lyric，这样就避免了重新请求数据。
                state.temporaryLric = Originatemporary;
                state.pageLyric = lyric;
                state.pageFlag = true;
            }

        },
        changeLyricProgressTime(state, value) {

            state.lyricProgressTime = value;
        },
        changeLyricElement(state, value) {

            state.lyricElement = value;
        },
        changeClientY(state, value) {
            state.clientY = value;
        },
        //  鼠标移动控制歌词滚动条
        changeLyricScrollBar(state, value) {

            const move = value - state.clientY;


            if (state.slideTop + move < 0) {
                state.slideTop = 0;
                state.contextMove = 0;
            } else if (state.slideTop + move <= state.maxTop) {

                state.slideTop = state.slideTop + move;
                state.contextMove = state.slideTop + move;
            } else {

                state.slideTop = state.maxTop;
                state.contextMove = state.maxTop;
            }

            state.clientY = value;
        },
        changeMousemoveFlag(state, value) {
            state.mousemoveFlag = value;
        },
        changeSlideTop(state, value) {
            state.slideTop = value;
        },
        changeMaxTop(state, value) {
            state.maxTop = value;
        },
        changelyricboxElement(state, value) {
            state.lyricboxElement = value;
        },
        changePageFlag(state, value) {
            state.pageFlag = value;
        },
        changePageLyric(state, value) {
            state.pageLyric = value;
        }



    }
}